<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="content">
      <!-- 头部 -->
    <div class="main-title">
      <ul>
        <li>
          <div @click="navBackClick(1)" class="main-title-left main-title-noSelect">
            首页
          </div>
          <div class="main-title-right">
            /
          </div>
        </li>
        <li>
          <div @click="navBackClick(2)" class="main-title-left main-title-noSelect">
            系统设置
          </div>
          <div class="main-title-right">
            /
          </div>
        </li>
        <li>
          <div class="main-title-left main-title-select">
            字典管理
          </div>
          <div class="main-title-right">
            <!-- / -->
          </div>
        </li>
      </ul>
    </div>
    <div class="content-center">
      <!--筛选-->
      <div class="main-search">
        <div class="title-left">
          <div>
              <select v-model="searchList">
                <option v-for="(type,index) in searchLists" v-bind:value="index" :key="index">{{type.name}}</option>
              </select>
          </div>
          <!-- <div class="searchInput">
            <div class="searchInput-input">
              <div>
                <input type="text" placeholder="请输入" v-model="searchNameVal">
              </div>
              <div>
                
              </div>              
            </div>
          </div> -->
          <div class="searchBut">
            <div class="searchBut-search" @click="searchClick">
              查&nbsp;&nbsp; 询
            </div>
            <!-- <div class="searchBut-cancel" @click="emptyClick">
              <div class="title-r-but-left">
               <img src="static/img/清空.png" alt="">
              </div>
              <div class="title-r-but-right">
               清空
              </div>
            </div> -->
          </div>
        </div>
        <div class="title-right">
          <div class="title-right-but" @click="addClick">
             <div class="title-r-but-left">
               <img src="static/img/添加.png" alt="">
             </div>
             <div class="title-r-but-right">
                &nbsp;&nbsp;添加字典
             </div>
          </div>
        </div>
      </div>
      <!--列表-->
      <div class="main-list">
        <ul>
          <li class="fistLi">
            <div class="liOne">名称</div>
            <div class="liOne">描述</div>
            <div class="liOne">添加时间</div>
            <div class="liOne">操作</div>
          </li>
          <li v-show="lists.length > 0"  class="dataLi" v-for="(item,index) in lists" :key="index">
            <div>{{item.name | strFun}}</div>
            <div>{{item.desc | strFun}}</div>
            <div>{{item.createDate | timeFun}}</div>
            <div class="data-operation">
              <div @click="updateAccountCLick(index)">修改</div>
              <div @click="delAccountCLick(index)">删除</div>
            </div>
          </li>
          <!-- <li v-show="lists.length > 0"  class="pageLi">
            <div></div>
            <div>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSizeNum" layout="total,sizes,prev, pager, next,jumper" :total="totalNum">
               </el-pagination>
            </div>
          </li> -->
          <li v-show="lists.length == 0" id="nullLi">
            <img src="/static/img/空状态.png" alt="">
          </li>
        </ul>
      </div>
      <div :class="{showdel:isShowdel}" class="delPopup">
        <transition name="slide-fade">
            <v-mDel @ok="confirmClick" @canle="cancelClick" :name="titlename"></v-mDel>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import mDel from "../module/mDel";
export default {
  components: {
    "v-mDel": mDel
  },
  data() {
    return {
      searchNameVal: "",
      searchLists: [{ name: "渠道" }, { name: "岗位" }],
      searchList: "0",
      lists: [],
      isShowdel: true,
      toPath: "",
      titlename: "是否删除该字典？",
      pageSizeNum: 10,
      currentPage: 1,
      totalNum: 0,
      delIndex: "0"
    };
  },
  // 过滤
  filters: {
    timeFun: function(val) {
      if (val) {
        var now = new Date(val);
        var year = now.getYear() - 100;
        var month = now.getMonth() + 1;
        month = month > 9 ? month : "0" + month;
        var date = now.getDate();
        date = date > 9 ? date : "0" + date;
        var hour = now.getHours();
        hour = hour > 9 ? hour : "0" + hour;
        var minute = now.getMinutes();
        minute = minute > 9 ? minute : "0" + minute;
        return (
          "20" + year + "-" + month + "-" + date + " " + hour + ":" + minute
        );
      } else {
        return "无";
      }
    },
    strFun: function(val) {
      if (val) {
        return val;
      } else {
        return "无";
      }
    }
  },
  // 模块新建时
  created: function() {
    var self = this;
    self.listFun();
  },
  // 计算属性
  mounted() {},
  // 事件处理
  methods: {
    // 修改账号
    updateAccountCLick(index) {
      var self = this;
      this.$router.push({
        path: "/home/opDictionaries",
        query: { op: 2, id: self.lists[index].id }
      });
      sessionStorage.setItem(
        "dictionariesListObj",
        JSON.stringify(self.lists[index])
      );
    },
    // 新增账号
    addClick() {
      this.$router.push({
        path: "/home/opDictionaries",
        query: { op: 1 }
      });
    },
    delAccountCLick(index) {
      this.isShowdel = false;
      this.delIndex = index;
    },
    confirmClick() {
      var self = this;
      this.isShowdel = true;
      self
        .getdictDelete({
          id: self.lists[self.delIndex].id
        })
        .then(data => {
          if (data.code == 200) {
            self.$message({
              type: "success",
              message: "删除成功"
            });
            self.listFun();
          } else {
            self.$message({
              type: "info",
              message: data.message
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常!"
          });
        });
    },
    //取消未保存弹出框
    cancelClick() {
      this.isShowdel = true;
    },
    // 点击分页
    handleCurrentChange(val) {
      var self = this;
      self.currentPage = val;
      self.listFun();
    },
    // 选择每页个数
    handleSizeChange(val) {
      var self = this;
      self.currentPage = 1;
      self.pageSizeNum = val;
      self.listFun();
    },
    // 获取列表
    listFun() {
      var self = this;
      self.lists = [];
      self
        .getdict({})
        .then(data => {
          if (data.code == 200) {
            if (data.data.length > 0) {
              var sources = [];
              var posts = [];
              data.data.forEach(function(ele, ind) {
                if (ele.type == "HUMAN_RESOURCE_SOURCE") {
                  sources.push(ele);
                } else if (ele.type == "HUMAN_RESOURCE_POSITION") {
                  posts.push(ele);
                }
              });
              self.lists = sources;
            }
          } else {
            self.$message({
              type: "info",
              message: data.message
            });
          }
        })
        .catch(msg => {
          // console.log(msg);
          self.$message({
            type: "info",
            message: "服务器异常!"
          });
          this.$router.push({
            path: "/login"
          });
        });
    },
    emptyClick() {
      var self = this;
    },
    // 搜索
    searchClick() {
      var self = this;
      var self = this;
      self.lists = [];
      self
        .getdict({})
        .then(data => {
          if (data.code == 200) {
            if (data.data.length > 0) {
              var sources = [];
              var posts = [];
              data.data.forEach(function(ele, ind) {
                if (ele.type == "HUMAN_RESOURCE_SOURCE") {
                  sources.push(ele);
                } else if (ele.type == "HUMAN_RESOURCE_POSITION") {
                  posts.push(ele);
                }
              });
              if (self.searchLists[self.searchList].name == "渠道") {
                self.lists = sources;
              } else if (self.searchLists[self.searchList].name == "岗位") {
                self.lists = posts;
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.message
            });
          }
        })
        .catch(msg => {
          // console.log(msg);
          self.$message({
            type: "info",
            message: "服务器异常!"
          });
          this.$router.push({
            path: "/login"
          });
        });
    },
    navBackClick(index) {
      if (index == 2) {
        this.$router.push({
          path: "/home/system"
        });
      } else if (index == 1) {
        this.$router.push({
          path: "/home/system"
        });
      }
    },
    ...mapActions(["getuserpage", "getdictDelete", "getdict"])
  },
  // 监视
  watch: {}
};
</script>
<style scoped>
#nullLi {
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#nullLi img {
  width: 300px;
  /* height: 300px; */
}
.fistLi,
.dataLi,
.pageLi {
  width: 100%;
  min-height: 54px;
}

.pageLi {
  margin-top: 75px;
  height: 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(232, 232, 232, 1);
}
.pageLi > div:nth-child(1) {
  width: 100px;
}
.pageLi > div:nth-child(2) {
  min-width: 300px;
  margin-right: 5px;
}

.fistLi {
  height: 54px;
  background-color: #fffafafa !important;
  border-bottom: 1px solid #ffe8e8e8;
  display: flex;
}
.fistLi > div {
  font-size: 14px !important;
  font-family: PingFangSC-Medium;
  color: rgba(0, 0, 0, 0.85) !important;
  font-weight: 600;
}
.dataLi {
  border-bottom: 1px solid rgba(232, 232, 232, 1);
  display: flex;
  height: 54px;
  background-color: #fff;
}
.dataLi:hover {
  background: rgba(255, 247, 230, 1);
}
.dataLi > div {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.9);
}

.fistLi > div,
.dataLi > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fistLi > div:nth-child(1),
.dataLi > div:nth-child(1) {
  width: 25%;
  min-width: 45px;
}
.fistLi > div:nth-child(2),
.dataLi > div:nth-child(2) {
  width: 25%;
  min-width: 45px;
}
.fistLi > div:nth-child(3),
.dataLi > div:nth-child(3) {
  width: 25%;
  min-width: 70px;
}
.fistLi > div:nth-child(4) {
  width: 25%;
}
.dataLi .data-operation {
  display: flex;
  width: 25%;
  align-items: center;
  min-width: 200px;
}
.data-operation .data-operation-more {
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
}
.data-operation-more-bottom {
  position: absolute;
  background-color: #fff;
  min-width: 47px;
  min-height: 30px;
  top: 25px;
  left: -20px;
  z-index: 1000;
  box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5);
}
.data-operation-more-bottom > div:nth-last-of-type(1) {
  margin-bottom: 9px;
}
.data-operation-more-bottom > div {
  width: 57px;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 7px;
  padding-right: 10px;
  padding-left: 10px;
}
.data-operation .data-operation-more .data-operation-more-top {
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(250, 140, 22, 1);
  /* border: 1px solid red; */
  height: 40px;
  line-height: 40px;
}
.data-operation .data-operation-more .data-operation-more-top > div {
  margin-right: 2px;
  margin-left: 2px;
}
.data-operation > div img {
  width: 10px;
  height: 6px;
}
.data-operation > div {
  height: 14px;
  line-height: 14px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: rgba(250, 140, 22, 1);
  border-left: 1px solid rgba(216, 216, 216, 1);
}
.data-operation > div:nth-child(1) {
  border: 0;
}
.searchInput-input {
  height: 28px;
  width: 200px;
  display: flex;
  border: 1px solid #9c9c9c;
  border-radius: 3px;
}
.searchInput {
  display: flex;
  width: 205px;
  align-items: center;
}
.searchInput-input > div:nth-child(2) {
  font-size: 13px;
  color: #000;
  height: 28px;
  line-height: 28px;
  width: 30px;
  text-align: center;
}
.searchInput-input > div:nth-child(1) {
  display: flex;
  align-items: center;
}
.searchInput-input > div:nth-child(1) input {
  width: 160px;
  height: 27px;
  border: 0;
  line-height: 27px;
  font-size: 13px;
  padding-left: 7px;
}

.searchBut-search {
  width: 74px;
  height: 32px;
  background: rgba(250, 140, 22, 1);
  border-radius: 4px;
  line-height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  cursor: pointer;
}
.searchBut-cancel {
  width: 74px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  line-height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  margin-left: 8px;
  border: 1px solid #ffd9d9d9;
  cursor: pointer;
}
.searchBut {
  display: flex;
}
.title-left > div {
  margin-left: 15px;
}
.title-left select {
  width: 100px;
  height: 30px;
  border-radius: 4px;
  font-size: #666;
  border: 1px solid #9c9c9c;
}
select::-ms-expand,
select::-webkit-expand {
  display: none;
}
.title-left {
  height: 50px;
  min-width: 300px;
  display: flex;
  align-items: center;
}
.title-right {
  height: 50px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-r-but-right {
  min-width: 15px;
  font-size: 13px;
  color: #fff;
}
.title-r-but-left {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.title-r-but-left img {
  width: 100%;
  height: 100%;
}
.title-right-but {
  width: 104px;
  height: 32px;
  background: rgba(250, 140, 22, 1);
  border-radius: 4px;
  line-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 255, 255, 1);
}

.main-title-noSelect {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}
.main-title-select {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
}

.main-title-right {
  width: 23px;
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.main-title ul {
  width: 100%;
  display: flex;
  height: 54px;
  margin-left: 34px;
}
.main-title ul li {
  display: flex;
}
.main-title {
  width: 100%;
  height: 54px;
  background-color: #fff;
  line-height: 54px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: inset 0px 3px 3px 0px #ccc;
}

.main-search {
  width: 100%;
  height: 80px;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-list ul {
  width: 100%;
  overflow: hidden;
  min-height: 500px;
}
.main-list {
  width: 100%;
  margin-top: 15px;
  min-height: 50px;
  /* border: 2px solid #00beff; */
  background-color: #ffff;
}

.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(240, 242, 245, 1) !important;
  min-height: 350px;
  /* border: 1px solid red; */
  display: flex;
  flex-wrap: wrap;
}

.content-center {
  overflow: hidden;
  width: calc(100% - 48px);
  margin-left: 24px;
  background-color: #fff;
  margin-top: 24px;
  border-radius: 3px;
  min-height: calc(100% - 78px - 24px);
  margin-bottom: 24px;
}

/*取消弹出框*/

.delPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showdel {
  display: none;
}

.slide-fade-enter-active {
  transition: all 0.7s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}
</style>